<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>弹出与收起二级菜单</title>
<head>
<body>
    <ul class="all">
                <li>一级菜单1
                <ul>
                    <li>二级菜单1</li>
                    <li>二级菜单2</li>
                    <li>二级菜单3</li>
                </ul>
            </li>
            <li>一级菜单2
                <ul>
                    <li>二级菜单1</li>
                    <li>二级菜单2</li>
                    <li>二级菜单3</li>
                </ul>
            </li>
            <li>一级菜单3
                <ul>
                    <li>二级菜单1</li>
                    <li>二级菜单2</li>
                    <li>二级菜单3</li>
                </ul>
            </li>
    </ul>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
	    // $(".all>li").mouseenter(function(){	$(this).children().slideDown(500);});
        // $(".all>li").mouseleave(function(){	$(this).children().slideUp(500);});})

        // $(".all>li").on('mouseenter',function(){
        //     $(this).children().slideDown(500);
        // })

        // $(".all>li").on('mouseleave',function(){
        //     $(this).children().slideUp(500);
        // })

        $('.all>li').hover(function(){
            $(this).children().slideDown(500);
        },
        function(){
            $(this).children().slideUp(500);
        }
    )
    })
</script>
